<template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="12" :lg="6" :xl="4" style="margin-bottom: 10px">
        <el-card class="box-card" style="min-height: 600px;">
          <div slot="header">
            <el-row style="height: 40px;line-height: 40px;">
              <el-col :lg="12" :sm="12">我的项目</el-col>
              <el-col :lg="12" :sm="12" style="text-align: right;">
                <el-button-group>
                  <el-tooltip class="item" effect="dark" content="新增项目" placement="top-start">
                    <el-button type="success" icon="el-icon-edit" />
                  </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="项目档案" placement="top-start">
                    <el-button type="primary" icon="el-icon-folder-opened" />
                  </el-tooltip>
                </el-button-group>
              </el-col>
            </el-row>
          </div>
          <el-row v-for="(item,key) in app" :key="key" style="font-size: 12px; margin-top: 5px;">
            <el-card :ref="item.id" :shadow=" showApp == item.id?'always':'never' " @click.native="selectApp(item)">{{ item.name }}</el-card>
          </el-row>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="18" :xl="20">
        <el-card class="box-card" style="min-height: 600px;">
          <div slot="header">任务列表</div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>

export default {
  name: 'DsApp',
  data() {
    return {
      checkDetail: false,
      showApp: '',
      app: [{ id: 1, name: '长沙银行投行综合管理系统2021' }, { id: 2, name: '长沙银行投行综合管理系统人力外包项目2021' }, { id: 3, name: '宁波银行非金融企业债务管理系统' }]
    }
  },
  mounted() {
    this.getApps()
  },
  methods: {
    getApps() {
    },
    selectApp(item) {
      if (this.showApp == item.id) {
        this.showApp = ''
        return
      }
      this.showApp = item.id
    }
  }
}
</script>

<style scoped>

</style>
